<template>
    <h2>使用数字设置</h2>
    <div class="使用数字设置 tw:w-200 tw:columns-3">
        <div>
            <p>1</p>
            <img src="@/assets/img/villas.jpg" alt="" class="tw:w-50 tw:aspect-3/2">
        </div>
        <div>
            <p>2</p>
            <img src="@/assets/img/villas.jpg" alt="" class="tw:w-50 tw:aspect-3/2">
        </div>
        <div>
            <p>3</p>
            <img src="@/assets/img/villas.jpg" alt="" class="tw:w-50 tw:aspect-3/2">
        </div>
        <div>
            <p>4</p>
            <img src="@/assets/img/villas.jpg" alt="" class="tw:w-50 tw:aspect-3/2">
        </div>
        <div>
            <p>5</p>
            <img src="@/assets/img/villas.jpg" alt="" class="tw:w-50 tw:aspect-3/2">
        </div>
        <div>
            <p>6</p>
            <img src="@/assets/img/villas.jpg" alt="" class="tw:w-50 tw:aspect-3/2">
        </div>
        <div>
            <p>7</p>
            <img src="@/assets/img/villas.jpg" alt="" class="tw:w-50 tw:aspect-3/2">
        </div>
    </div>
    <h2>使用宽度设置</h2>
    <div class="使用宽度设置 tw:columns-3xs">
        <div>
            <p>1</p>
            <img src="@/assets/img/villas.jpg" alt="图片" class="tw:w-50">
            <p>2</p>
            <img src="@/assets/img/villas.jpg" alt="图片" class="tw:w-50">
            <p>3</p>
            <img src="@/assets/img/villas.jpg" alt="图片" class="tw:w-50">
            <p>4</p>
            <img src="@/assets/img/villas.jpg" alt="图片" class="tw:w-50">
            <p>5</p>
            <img src="@/assets/img/villas.jpg" alt="图片" class="tw:w-50">
            <p>6</p>
            <img src="@/assets/img/villas.jpg" alt="图片" class="tw:w-50">
            <p>7</p>
            <img src="@/assets/img/villas.jpg" alt="图片" class="tw:w-50">
        </div>
    </div>
    <h2>设置间隔</h2>
    <div class="设置间隔 flex tw:columns-3 tw:gap-8 tw:w-316 tw:bg-red-100">
        <p>1</p>
        <img src="@/assets/img/villas.jpg" alt="图片" class="tw:w-100 bg-indingo-100">
        <p>2</p>
        <img src="@/assets/img/villas.jpg" alt="图片" class="tw:w-100 bg-indingo-100">
        <p>3</p>
        <img src="@/assets/img/villas.jpg" alt="图片" class="tw:w-100 bg-indingo-100">
        <p>4</p>
        <img src="@/assets/img/villas.jpg" alt="图片" class="tw:w-100 bg-indingo-100">
        <p>5</p>
        <img src="@/assets/img/villas.jpg" alt="图片" class="tw:w-100 bg-indingo-100">
        <p>6</p>
        <img src="@/assets/img/villas.jpg" alt="图片" class="tw:w-100 bg-indingo-100">
        <p>7</p>
        <img src="@/assets/img/villas.jpg" alt="图片" class="tw:w-100 bg-indingo-100">
    </div>
    <h2>自定义宽度</h2>
    <div class="自定义宽度 tw:w-[70vw] tw:columns-[30vw] tw:gap-[10vw] tw:bg-indigo-100">
        <img src="@/assets/img/villas.jpg" alt="" class="tw:w-[25vw]">
        <img src="@/assets/img/villas.jpg" alt="" class="tw:w-[25vw]">
        <img src="@/assets/img/villas.jpg" alt="" class="tw:w-[25vw]">
        <img src="@/assets/img/villas.jpg" alt="" class="tw:w-[25vw]">
        <img src="@/assets/img/villas.jpg" alt="" class="tw:w-[25vw]">
        <img src="@/assets/img/villas.jpg" alt="" class="tw:w-[25vw]">
        <img src="@/assets/img/villas.jpg" alt="" class="tw:w-[25vw]">
        <img src="@/assets/img/villas.jpg" alt="" class="tw:w-[25vw]">
        <img src="@/assets/img/villas.jpg" alt="" class="tw:w-[25vw]">
        <img src="@/assets/img/villas.jpg" alt="" class="tw:w-[25vw]">
    </div>
</template>